<template>
  <div>
    <h3>自定义域名管理</h3>
    <el-table :data="domains" border style="width: 100%">
      <el-table-column prop="name" label="域名名称"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteDomain(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" size="small" style="margin-top: 20px;" @click="openAddDialog">新增域名</el-button>

    <!-- Add Domain Dialog -->
    <el-dialog title="新增域名" :visible.sync="dialogVisible.add" width="50%">
      <el-form ref="addForm" :model="newDomain" :rules="rules" label-width="120px">
        <el-form-item label="域名名称" prop="name">
          <el-input v-model="newDomain.name"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="newDomain.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.add = false">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- Edit Domain Dialog -->
    <el-dialog title="编辑域名" :visible.sync="dialogVisible.edit" width="50%">
      <el-form ref="editForm" :model="editingDomain" :rules="rules" label-width="120px">
        <el-form-item label="域名名称" prop="name">
          <el-input v-model="editingDomain.name"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="editingDomain.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.edit = false">取 消</el-button>
        <el-button type="primary" @click="submitEditForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['domains'],
  data() {
    return {
      dialogVisible: {
        add: false,
        edit: false
      },
      newDomain: {
        name: '',
        description: ''
      },
      editingDomain: {},
      rules: {
        name: [
          { required: true, message: '请输入域名名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    openAddDialog() {
      this.dialogVisible.add = true;
      this.newDomain = {
        name: '',
        description: ''
      };
    },
    submitAddForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$emit('add-domain', { ...this.newDomain });
          this.dialogVisible.add = false;
        } else {
          this.$message({
            type: 'error',
            message: '请检查表单填写是否正确'
          });
          return false;
        }
      });
    },
    openEditDialog(domain) {
      this.dialogVisible.edit = true;
      this.editingDomain = { ...domain };
    },
    submitEditForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$emit('edit-domain', { ...this.editingDomain });
          this.dialogVisible.edit = false;
        } else {
          this.$message({
            type: 'error',
            message: '请检查表单填写是否正确'
          });
          return false;
        }
      });
    },
    deleteDomain(id) {
      this.$emit('delete-domain', id);
    }
  }
};
</script>

<style scoped lang="scss">
h3 {
  margin-bottom: 20px;
}

.el-dialog {
  .el-form {
    .el-form-item {
      margin-bottom: 15px;
    }
  }
}
</style>
